<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2023-01-12 16:25:44
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-01-12 17:13:00
-->
<html>
	<head>
		<meta charset="utf-8">
		<style>
			table{background-image:url(./images/beijing.jpg);}
			table caption{font-family:'微软雅黑';font-size:30px;}
			table td{width:100px;height:100px;}
			img{margin-top:31px;}
		</style>
	</head>
	<body>
        <h5>总分:0</h5>
		<table style="margin: 0 auto;">
			<caption>打地鼠</caption>
            
			<tr>
				<td><img src="./images/keng.gif"/></td>
				<td><img src="./images/keng.gif"/></td>		
				<td><img src="./images/keng.gif"/></td>
			</tr>
			<tr>
				<td><img src="./images/keng.gif"/></td>
				<td><img src="./images/keng.gif"/></td>		
				<td><img src="./images/keng.gif"/></td>
			</tr>
			<tr>
				<td><img title="gh" src="./images/keng.gif"/></td>
				<td><img src="./images/keng.gif"/></td>		
				<td><img src="./images/keng.gif"/></td>
			</tr>
		</table>
		
	</body>

    <script>
        // 1.获取所有的td    dom获取元素
        // 2.随机获取一个td 让他的背景改成 有地鼠的图片 随机数 
        //  dom 操作属性的值 修改src的属性 
        // 3.让每个都有一个点击事件 
        //  onclick 
        // 4. 如果打中 图片换成打中的图片 没打中 换成 keng.gif
        // 5. 计算分数 innerHTML

        // 1.获取元素 
        var imgs = document.getElementsByTagName('img');
        var num,sum=0;

        setTimeout(mao,Math.random()*400+800);
        // 下面  mao 执行 缩 缩执行 mao 冒执行 打 
        // 上面 已经是循环操作了 不能再用setInterval

        // 冒出来 
        function mao(){
            // 随机数 
            num = Math.floor(Math.random()*9);
            // 修改对应图片的src属性 dishu.gif
            imgs[num].src = "./images/dishu.gif";
            // 添加点击事件
            imgs[num].setAttribute("onclick","da()");
            imgs[num].style.marginTop = "0px";
            // 多长时间以后缩回去
            
            setTimeout(suo,Math.random()*400+800);
        }

        // 缩回去
        function suo(){
            // 修改对应图片的src属性 keng.gif
            imgs[num].src = "./images/keng.gif";
            // 删除点击事件
            imgs[num].removeAttribute("onclick");
            imgs[num].style.marginTop = "31px";
            setTimeout(mao,Math.random()*400+800);
        }

        // 击打 
        function da(){
            imgs[num].src = "./images/shang.gif";
            // 修改对应图片的src属性 shang.gif
            // 删除点击事件
            imgs[num].removeAttribute("onclick");
            // imgs[num].style.marginTop = "3px";
            // 分数累积 并将结果呈现到页面上
            sum+=10;
            if(sum>=60){
                window.location.href = "http://www.qfedu.com";
             }
            document.getElementsByTagName('h5')[0].innerHTML = "总分:"+sum;
            
        }

        


    </script>
</html>